<template>
	<view class="rider_funds_details">
        <uni-datetime-picker 
            type="date"    
            @change="dateChange"
            @maskClick="dateChange(null)"
            ref="datetimePickerRef"
        >
        <div style="display:none"></div>
    </uni-datetime-picker>
        <div class="funds_details_cont">
            <u-dropdown
                @open="showDatetimePicker($event,true)"
                @close="showDatetimePicker($event,false)"
                class="details_cont_dropdown"
                ref="uDropdownRef"
                active-color="#f37000"
            >
                <u-dropdown-item 
                    v-model="dropdownData.type.value" 
                    :title="dropdownData.type.title" 
                    :options="dropdownData.type.options"
                    @change="dropdownItemChange($event,`type`)"
                ></u-dropdown-item>
                <u-dropdown-item 
                    v-model="dropdownData.condition.value" 
                    :title="dropdownData.condition.title" 
                    :options="dropdownData.condition.options"
                    @change="dropdownItemChange($event,`condition`)"
                ></u-dropdown-item>
                <u-dropdown-item 
                    v-model="dropdownData.date.value" 
                    :title="dropdownData.date.title" 
                >
                </u-dropdown-item>

            </u-dropdown>
        </div>

        <div class="funds_details_list">
            <u-index-list :scrollTop="scrollTop" :offset-top="80" :zIndex="1">
                <view>
                    <u-index-anchor :use-slot="true">
                        <div class="slot_cont">
                            <div class="date_text">
                                {{ dropdownData[`date`].title }}
                            </div>
                            <div class="details_text">
                                收入 <div class="fh">¥</div> {{ currentData.income }} 支出 <div class="fh">¥</div> {{ currentData.payout }} 系统划转 <div class="fh">¥</div> {{ currentData.transfer }}
                            </div>
                        </div>
                    </u-index-anchor>
                    <div class="list_cell_box">
                        <view 
                            class="list_cell" 
                            v-for="(item,index) in  currentData.list" 
                            :key="index"
                        >
                            <div class="cell_row cell_row1">
                                <div class="cell_row_name">
                                    {{ baseTradeTypeToggle[item.trade_type] }}
                                </div>
                                <div class="cell_row_money">
                                    {{ item.symbol }}{{ item.change_amount }}
                                </div>
                            </div>
                            <div class="cell_row cell_row2">
                                <div class="cell_row_time">
                                    {{ getMoment(item.create_date).format(`YYYY-MM-DD HH:mm:ss`) }}
                                </div>
                                <div class="cell_row_status">
                                    {{ baseStatusTypeToggle[item.status_type] }}
                                </div>
                            </div>
                        </view>
                    </div>
                </view>
            </u-index-list>
            <div 
                v-if="currentData.list.length===0"
                class="order_empty_box noDataBox"
            >
                <div class="noDataBorder">
                    <image src="~@/static/images/nodata.png" class="nodataPic"/>
                </div>
                <div class="noDataTips">
                    暂无更多账单记录~~
                </div>
            </div>
            <view 
                class="foot" 
                style="margin: 10px; 0"
                v-else
            >
                <div class="load-more">
                    <uni-load-more iconType="circle" :status="loadMoreConfig.status" :content-text="loadMoreConfig.text"  />
                </div>
            </view>
        </div>

	</view>
</template>

<script src="./funds-details.ts" lang="ts"></script>

<style lang="stylus" scoped>
@import './funds-details.styl';
</style>
